import React, { useRef, useState } from 'react'
import { NavBar, Space, Toast, Rate,Tabs, Swiper } from 'antd-mobile'
import { SendOutline } from 'antd-mobile-icons'
import './tingshu.css'
const tabItems = [
  { key: 'mulu', title: '目录' },
  { key: 'shuping', title: '书评' },
  { key: 'tuijian', title: '推荐' },
]

export default function Tingshu() {
    const swiperRef = useRef(null)
    const [activeIndex, setActiveIndex] = useState(1)
    const data = {
        img: "",
        title: "女权主义，从零开始",
        zuozhe: "[波]斯坦尼斯瓦夫·莱姆",
        content: "波兰科幻大师斯坦尼斯瓦夫·莱姆代表作，以诗意笔触和深邃哲学",
        text: '5555555555555',
        rate: 5,
    }

    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <SendOutline />
            </Space>
        </div>
    )
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    return (
        <div>
            <div style={{ position: "absolute", top: 0, width: "100%", height: "45px", background: "white" }}>
                <NavBar right={right} onBack={back}>
                </NavBar>
            </div>
            <div className='tingshu'>
                <img src='/logo192.png' alt='' className='tingimg' />
                <div className='tsright'>
                    <p style={{ fontSize: "25px", height: "40px", lineHeight: "40px" }}>{data.title}</p>
                    <p style={{ fontSize: "17px", color: "#999", height: "60px", lineHeight: "60px" }}>作者：{data.zuozhe}</p>
                    <p className='tscontent'>{data.content}</p>
                    <Rate readOnly value={data.rate} className='rate' /><span style={{ color: "orange", fontSize: "23px" }}>{data.rate}.0</span>
                </div>
            </div>
            <div className='tszhong'>
                <p style={{ color: "#333", fontSize: "23px", margin: "25px 10px" }}>内容介绍</p>
                <p style={{ color: "#999", margin: "0 10px", fontSize: "20px" }}>{data.text}</p>
            </div>
            <div style={{}}>
                <Tabs
                    activeKey={tabItems[activeIndex].key}
                    onChange={key => {
                        const index = tabItems.findIndex(item => item.key === key)
                        setActiveIndex(index)
                        swiperRef.current?.swipeTo(index)
                    }}
                >
                    {tabItems.map(item => (
                        <Tabs.Tab title={item.title} key={item.key} />
                    ))}
                </Tabs>
                <Swiper
                    direction='horizontal'
                    loop
                    indicator={() => null}
                    ref={swiperRef}
                    defaultIndex={activeIndex}
                    onIndexChange={index => {
                        setActiveIndex(index)
                    }}
                >
                    <Swiper.Item>
                        <div >1</div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div>2</div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div >3</div>
                    </Swiper.Item>
                </Swiper>
            </div>
        </div>
    )
}
